<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>灾情信息管理</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    :root {
      --primary: #2c3e50;
      --secondary: #3498db;
      --success: #2ecc71;
      --danger: #e74c3c;
      --light: #ecf0f1;
      --gray: #95a5a6;
      --border-radius: 8px;
      --shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background-color: #f8f9fa;
      padding: 30px 20px;
      color: var(--primary);
    }

    .page-title {
      text-align: center;
      margin-bottom: 40px;
      color: var(--primary);
      font-size: 2rem;
      font-weight: 600;
    }

    .container {
      max-width: 1000px;
      margin: 0 auto;
    }

    .card-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
    }

    @media (min-width: 768px) {
      .card-container {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .card {
      background: white;
      border-radius: var(--border-radius);
      padding: 25px;
      box-shadow: var(--shadow);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .card-title {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--primary);
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--light);
    }

    .card-title i {
      color: var(--secondary);
    }

    .form-group {
      margin-bottom: 18px;
    }

    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: var(--primary);
      font-size: 0.95rem;
    }

    input[type="text"],
    input[type="number"],
    input[type="datetime-local"],
    select,
    textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 1rem;
      transition: border-color 0.3s ease;
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: var(--secondary);
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    }

    textarea {
      resize: vertical;
      min-height: 100px;
    }

    .btn {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 6px;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin-top: 10px;
    }

    .btn-primary {
      background-color: var(--secondary);
      color: white;
    }

    .btn-primary:hover {
      background-color: #2980b9;
    }

    .btn-danger {
      background-color: var(--danger);
      color: white;
    }

    .btn-danger:hover {
      background-color: #c0392b;
    }

    .btn-success {
      background-color: var(--success);
      color: white;
    }

    .btn-success:hover {
      background-color: #27ae60;
    }

    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 40px;
      color: var(--secondary);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    .back-link:hover {
      color: var(--primary);
      text-decoration: underline;
    }

    .full-width {
      grid-column: 1 / -1; /* 跨两列 */
    }

    .required-mark {
      color: var(--danger);
    }
  </style>
</head>
<body>
<h1 class="page-title">灾情信息管理</h1>

<div class="container">
  <div class="card-container">
    <!-- 新增灾情 -->
    <div class="card full-width">
      <h3 class="card-title">
        <i class="fas fa-plus-circle"></i> 新增灾情
      </h3>
      <form action="addDisaster" method="post">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
          <div class="form-group">
            <label>名称 <span class="required-mark">*</span></label>
            <input type="text" name="name" required>
          </div>
          <div class="form-group">
            <label>时间 <span class="required-mark">*</span></label>
            <input type="datetime-local" name="timestamp" required>
          </div>
          <div class="form-group">
            <label>地点 <span class="required-mark">*</span></label>
            <input type="text" name="location" required>
          </div>
          <div class="form-group">
            <label>影响区域 <span class="required-mark">*</span></label>
            <input type="text" name="affected_area" required>
          </div>
          <div class="form-group">
            <label>预警等级 <span class="required-mark">*</span></label>
            <input type="text" name="severity" required>
          </div>
          <div class="form-group">
            <label>联系方式 <span class="required-mark">*</span></label>
            <input type="text" name="contact" required>
          </div>
        </div>
        <div class="form-group">
          <label>描述 <span class="required-mark">*</span></label>
          <textarea name="description" required></textarea>
        </div>
        <div class="form-group">
          <label>状态 <span class="required-mark">*</span></label>
          <select name="status" required>
            <option value="">请选择</option>
            <option value="预测">预测</option>
            <option value="已发生">已发生</option>
            <option value="已解决">已解决</option>
          </select>
        </div>
        <input type="submit" class="btn btn-success" value="提交新增">
      </form>
    </div>

    <!-- 修改灾情 -->
    <div class="card">
      <h3 class="card-title">
        <i class="fas fa-edit"></i> 修改灾情
      </h3>
      <form action="updateDisaster" method="get">
        <div class="form-group">
          <label>灾情 ID <span class="required-mark">*</span></label>
          <input type="number" name="id" required>
        </div>
        <input type="submit" class="btn btn-primary" value="进入修改页面">
      </form>
    </div>

    <!-- 删除灾情 -->
    <div class="card">
      <h3 class="card-title">
        <i class="fas fa-trash-alt"></i> 删除灾情
      </h3>
      <form action="deleteDisaster" method="get" onsubmit="return confirm('确定要删除该灾情信息吗？此操作不可恢复！');">
        <input type="hidden" name="action" value="delete">
        <div class="form-group">
          <label>灾情 ID <span class="required-mark">*</span></label>
          <input type="number" name="id" required>
        </div>
        <input type="submit" class="btn btn-danger" value="删除灾情">
      </form>
    </div>
  </div>

  <a href="emergencyPage.jsp" class="back-link">
    <i class="fas fa-arrow-left"></i> 返回应急人员首页
  </a>
</div>

<!-- 提示框脚本 -->
<script>
  // 显示成功提示
  function showSuccessToast(message) {
    // 如果页面已存在提示框则移除
    const existingToast = document.querySelector('.success-toast');
    if (existingToast) existingToast.remove();

    // 创建新提示框
    const toast = document.createElement('div');
    toast.className = 'success-toast';
    toast.innerHTML = `
        <i class="fas fa-check-circle"></i>
        <span>${message}</span>
      `;
    document.body.appendChild(toast);

    // 显示动画
    setTimeout(() => {
      toast.style.transform = 'translateX(0)';
    }, 100);

    // 3秒后隐藏
    setTimeout(() => {
      toast.style.transform = 'translateX(calc(100% + 20px))';
      setTimeout(() => toast.remove(), 500);
    }, 3000);
  }

  // 显示错误提示
  function showErrorToast(message) {
    // 如果页面已存在提示框则移除
    const existingToast = document.querySelector('.error-toast');
    if (existingToast) existingToast.remove();

    // 创建新提示框
    const toast = document.createElement('div');
    toast.className = 'error-toast';
    toast.innerHTML = `
        <i class="fas fa-exclamation-circle"></i>
        <span>${message}</span>
      `;
    document.body.appendChild(toast);

    // 显示动画
    setTimeout(() => {
      toast.style.transform = 'translateX(0)';
    }, 100);

    // 3秒后隐藏
    setTimeout(() => {
      toast.style.transform = 'translateX(calc(100% + 20px))';
      setTimeout(() => toast.remove(), 500);
    }, 3000);
  }
</script>

<style>
  /* 成功提示框样式 */
  .success-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: var(--success);
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    transform: translateX(calc(100% + 20px));
    transition: transform 0.5s ease;
  }

  /* 错误提示框样式 */
  .error-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: var(--danger);
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    transform: translateX(calc(100% + 20px));
    transition: transform 0.5s ease;
  }
</style>

<%
  // 从session中获取消息并显示
  Object successMsg = session.getAttribute("message");
  Object errorMsg = session.getAttribute("errorMessage");

  if (successMsg != null) {
%>
<script>
  showSuccessToast("<%= successMsg.toString() %>");
</script>
<%
    session.removeAttribute("message");
  }

  if (errorMsg != null) {
%>
<script>
  showErrorToast("<%= errorMsg.toString() %>");
</script>
<%
    session.removeAttribute("errorMessage");
  }
%>
</body>
</html>